<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="纪德朝">
    <title>优酷导航条</title>
    <style>
    *{
        box-sizing: border-box;
    }
    nav{
        width: 100%;
          height: 50px;  
        background-color: #272a27;
    }
    .container{
        width: 1200px;
        margin: 0 auto;
    }
    li{
        list-style: none;
    }
    .nav-left>li{
        padding:0 10px;
        margin-right: 20px;
    }
    .active{
        padding: 0; 
        opacity: 0;
        background-color: #272a27;
        /* padding: 10px 0; */
    } 
    .active li{
        padding: 10px;  

    }   
    a{
        text-decoration: none;
        color: white;
    }
    .nav{
        display: flex;
        justify-content: space-between;
        text-align: center;
    }
    .nav-left{
        display: flex;
    }
    .nav-right{
        display: flex;
    }
    .nav-left>li:hover .active{
        opacity: 1;
    }
    </style>
</head>
<body>
    
    <nav>
        <div class="container nav">
            <ul class="nav-left">
                <li><a href="#">会员首页</a></li>
                <li>
                    <a href="#">看电影</a>
                    <ul class="active">
                        <li><a href="#">国内电影</a></li>
                        <li><a href="#">国外电影</a></li>
                    </ul>                                     
                </li>
                <li>
                    <a href="#">看剧</a>
                    <ul class="active">
                        <li><a href="#">美剧</a></li>
                        <li><a href="#">韩剧</a></li>
                        <li><a href="#">日剧</a></li>
                        <li><a href="#">电视剧</a></li>
                    </ul>
                </li>
                <li><a href="#">看动漫</a></li>
                <li><a href="#">看纪录片</a></li>
                <li><a href="#">德云社</a></li>
                <li><a href="#">看直播</a></li>
            </ul>
            <ul class="nav-right">
                <li class="icon-first"><a href="#">我的会员</a></li>
                <li class="icon-second"><a href="#">会员卡</a></li>
            </ul>
        </div>
        
    </nav>
</body>
<script>

</script>
</html>